<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .grid-container {
      width: 300px;
      background-color: skyblue;
      /* 网格布局 */
      display: inline-grid;
      /*
              定义行列和区域 
              3行 行高分别为 50px 100px 50px
              3列 列宽分别为 100px 100px 100px
          */
      grid-template:
        "a a b" 50px
        "a a b" 100px
        "c c c" 50px / 100px 100px 100px;
      margin: 100px;
    }
    .grid-item {
      padding: 10px;
      font-size: 30px;
      color: red;
    }
    .grid-item:nth-child(1) {
      background-color: pink;
      /* 指定所占区域 */
      grid-area: a;
    }
    .grid-item:nth-child(2) {
      background-color: khaki;
      /* 指定所占区域 */
      grid-area: b;
    }
    .grid-item:nth-child(3) {
      background-color: skyblue;
      /* 指定所占区域 */
      grid-area: c;
    }
  </style>
<body>
    <!-- 
        TIP
        grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。
    -->

    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
      </div>    
</body>
</html>